<template>
	<view class="reservation-success">
		<view class="success-icon">
<<<<<<< HEAD
			<image src='../../static/image/预约成功.png' alt="预约成功" mode="aspectFit"
				style="width: 110px;   height: 110px;"></image>
			<text style="font-weight: bolder;margin-top: 20px;margin-block-end: 20px;">预约成功</text>
			<view class="saoma">
			<navigator url="/pages/ScanQR/ScanQR">
			<image class="qr-code-button" src="../../static/navi/QR.png" @click="previewQRCode" alt="QR Code"></image>
			<text class="ruyuan">扫码入园</text>
			<BR></BR>
			<text> scan the QR code to enter the park</text>
			</navigator>
=======
			<image src='../../static/navi/success.png' alt="预约成功" mode="aspectFit"
				style="width: 110px;   height: 110px;"></image>
			<text style="font-weight: bolder;margin-top: 20px;margin-block-end: 20px;">预约成功</text>
			<view class="saoma">
				<navigator url="/pages/ScanQR/ScanQR">
					<image class="qr-code-button" src="../../static/navi/QR.png" @click="previewQRCode" alt="QR Code"></image>
					<text class="ruyuan">扫码入园</text>
					<BR></BR>
					<text class="ruyuanText"> scan the QR code to enter the park</text>
				</navigator>
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
			</view>
		</view>
		<view class="reservation-info">
			<text class="title" style="font-size: 17px; font-weight: bold;">预约信息</text>
			<view class="all">
			<view class="info-item">
				<text>姓名：</text>
				<text>{{ userInfo.membername }}</text>
			</view> <br>
			<view class="info-item">
				<text>证件类型：</text>
				<text>{{ userInfo.memberidType }}</text>
			</view><br>
			<view class="info-item">
				<text>证件号码：</text>
				<text>{{ userInfo.memberidNumber }}</text>
			</view><br>
			<view class="info-item">
				<text>手机号码：</text>
				<text>{{ userInfo.memberphoneNumber }}</text>
			</view><br>
			<view class="info-item">
				<text>团队名称：</text>
				<text>{{ userInfo.teamName }}</text>
			</view> <br>
			<view class="info-item">
				<text>团队人数：</text>
				<text>{{ userInfo.totalPeople }} </text>
			</view>
			</view>
			</view>
		</view><br><br>
		<button @click="cancelReservation" style=" background-color:#8DCB6D;">取消预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '张三',
					idType: '身份证',
					idNumber: '123456789012345678',
					phoneNumber: '13800000000',
					teamName: '事例团队',
					teamPerson: 50,
				}
			};
		},
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		
		methods: {
			cancelReservation() {
				// 实现取消预约的逻辑  
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行取消预约的API调用  
							console.log('预约已取消');
						}
					}
				});
			}
		},
		previewQRCode() {
			uni.previewImage({
				urls: ['/static/QR.png'], // 需要是网络上可访问的URL或者已经下载到本地的文件路径列表  
				current: 0, // 当前显示图片的http链接索引  
				success: function() {
					// 预览成功  
				}
			});
		}
	};
</script>

<style>
	.reservation-success {
		padding: 20px;
		background-color: #f3f5f9;
	}

	.success-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.success-icon text {
		margin: 5px 0;
	}

	.reservation-info {
		font-size: 15px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-weight: bolder;
	}

	.qr-code-button {
		width: 90rpx;
		height: 80rpx;
<<<<<<< HEAD
		margin-top: 5px;
		margin-left: 5px;
		cursor: pointer;
		display: flex;
		align-items: center;
		vertical-align: middle;
		float: left;
		padding: 20rpx 20rpx;
=======
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		cursor: pointer;
		vertical-align: middle;
		float: left;
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
	}
	.saoma{
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
<<<<<<< HEAD
		border-left-width: 5px;
		border-right-width: 300px;
=======
		width: 670rpx;
		height: 140rpx;
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
	}
	.all{
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
<<<<<<< HEAD
	}
	.ruyuan{
		font-weight: bolder;
		margin-left: 50px;
		vertical-align:middle;
=======
		margin-top: 10px;
	}
	.ruyuan{
		font-weight: bolder;
		margin-top: 100rpx;
		vertical-align: middle;
		float: left;
	}
	.ruyuanText{
		vertical-align: middle;
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
		float: left;
	}
</style>